import React from "react";
import { Link } from "react-router-dom";

export default function Pager({ pageCount, pageNum, loadData }) {
  //pageCount：总页数 —— 父组件向下传递的数据
  //pageNum：当前页号 —— 父组件向下传递的数据
  //loadData：加载指定页号上的数据 —— 父组件向下传递给子组件的方法，通过此方法子组件可以给父组件传递数据
  return (
    <div className="pages">
      {/* 上一页 */}
      <Link
        onClick={() => loadData(pageNum - 1)}
        to=""
        className={pageNum === 1 ? "default" : undefined}
      >
        上一页
      </Link>
      {/* 当前页-2 */}
      {pageNum - 2 >= 1 && (
        <Link onClick={() => loadData(pageNum - 2)} to="">
          {pageNum - 2}
        </Link>
      )}
      {/* 当前页-1 */}
      {pageNum - 1 >= 1 && (
        <Link onClick={() => loadData(pageNum - 1)} to="">
          {pageNum - 1}
        </Link>
      )}
      {/* 当前页 */}
      <Link to="" className="cur">
        {pageNum}
      </Link>
      {/* 当前页+1 */}
      {pageNum + 1 <= pageCount && (
        <Link onClick={() => loadData(pageNum + 1)} to="">
          {pageNum + 1}
        </Link>
      )}
      {/* 当前页+2 */}
      {pageNum + 2 <= pageCount && (
        <Link onClick={() => loadData(pageNum + 2)} to="">
          {pageNum + 2}
        </Link>
      )}
      {/* 下一页 */}
      <Link
        onClick={() => pageNum + 1 <= pageCount && loadData(pageNum + 1)}
        to=""
        className={pageNum === pageCount ? "default" : undefined}
      >
        下一页
      </Link>
    </div>
  );
}
